<!--
 * @Description: 图例组件
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2023-03-31 14:30:22
 * @LastEditTime: 2023-03-31 14:46:14
-->
<template>
  <div class="data-v-legend">
    <div class="legend-item" v-for="item in legends" :key="item.key">
      <div class="legend-color" :style="{ background: item.color }"></div>
      <div class="legend-name">{{ item.name }}</div>
    </div>
  </div>
</template>
 
<script lang="ts" setup>
import { PropType } from 'vue'
defineProps({
  legends: {
    type: Array as PropType<{
      color: string
      name: string
      key: string
    }[]>,
    default: () => [
      {
        color: 'red',
        name: '示例图例1',
        key: '1'
      }, {
        color: 'yellow',
        name: '示例图例2',
        key: '2'
      }, {
        color: 'green',
        name: '示例图例3',
        key: '3'
      }
    ]
  }
})
</script>
 
<style scoped lang="scss">
.data-v-legend {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .legend-item {
    height: 20px;
    display: flex;
    align-items: center;

    &~.legend-item {
      margin-left: 30px;
    }

    .legend-color {
      display: inline-block;
      width: 13px;
      height: 13px;
    }

    .legend-name {
      display: inline-block;
      margin-left: 6px;
      font-size: 13px;
      color: #ffffff;
    }
  }
}
</style>